<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/nav/nav.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../../css/user/bootstrap.css">
    <link rel="stylesheet" href="../../css/person-center/animate.css">
    <link rel="stylesheet" href="../../css/person-center/style.css">
    <link rel="stylesheet" href="../../css/plan-detail/plan-detail.css">
    
    <title>计划介绍</title>


</head>

<body>
    <!-- 响应式导航 begin -->
    <div class="o-header">
        <!-- 响应式导航 begin -->
        <div class="layui-header header header-index">
            <a class="logo" href="../../index.html">
                KeepMoving
            </a>

            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="../../index.html">首页</a></li>
                <li class="layui-nav-item layui-this">
                    <a href="../plan/plan-index.html">训练计划</a>
                </li>
                <li class="layui-nav-item"><a href="../action/fit-action.html">健身动作</a></li>
                <li class="layui-nav-item"><a href="../food/food.html">饮食健康</a></li>
                <li class="layui-nav-item ">
                    <a href="../user/login.html">登录</a>
                </li>
                <li class="layui-nav-item ">
                    <a href="../user/register.html">注册</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><img src="../../imgs/person-center/girl.jpg" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="../person/person-center.html">个人中心</a></dd>
                        <dd><a href="../person/person-info-profile.html">账号设置</a></dd>
                        <dd><a href="">退出账号</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <!-- 导航栏结束 -->
    </div>
    <!-- 响应式导航 end -->
    <!-- 计划详情开始 -->
    <div class="plan-detail-title">
        <div class="plan-title">
            <h2>六周极速脱脂计划</h2>
            <div class="plan-introduction">
                <span>准备好燃脂，增肌，增加力量，并在6周内彻头彻尾的达到低体脂。准备好实现最佳身材吧。准备好极速脱脂计划吧！</span>
            </div>
        </div>
    </div>


    <!-- 训练计划日历 开始 -->
    <div class="plan">
        <div class="plan-detail">
            <div class="plan-detail">
                <div class="title-plan">
                    <h2>六周极速脱脂计划</h2>
                </div>
                <div class="plan-info">
                    <span>课时: 6周</span>
                    <span>天/周: 5天</span>
                    <span>评分: 4.5</span>
                    <span>难度: H4</span>
                    <span>参与人数: 1000人</span>
                </div>
                <div class="plan-join">
                    <a href="#">
                        <span>+加入训练计划</span>
                    </a>
                </div>
                <div class="plan-intro">
                    <p>吉姆·斯托帕尼（Jim Stoppani），博士学位，致力于运动，营养和健康的研究，多本畅销书籍的作者，曾为像巨石强森和洛佩兹这样的名人做私人的营养和健康咨询。</p>
                    <p>他的这套课程将在6周内帮助你燃脂、增肌和增加力量，让你彻头彻尾的达到低体脂！</p>
                </div>
            </div>
        </div>

        <!-- 计划详情结束 -->

        <!--面包屑导航开始-->
        <div class="daohang">
            <span class="layui-breadcrumb">
                <a href="../plan/plan-index.html">所有训练计划</a>
                <a><cite>计划日历</cite></a>
            </span>
        </div>
        <!-- 面包屑导航结束 -->
        <div id="plan-calender">
            <div class="box-cal">
            </div>
        </div>
    </div>
    <!-- 训练计划日历 结束 -->

    <!-- 评论开始 -->
    <div class="container comment">

        <div class="comment-all">
            <div class="c-com">
                <span>评论</span>
            </div>

            <div class="c-num">
                <span>共220条评论</span>
            </div>
        </div>

        <div class="user-comment">
            <div class="social-comment">
                <a href="" class="pull-left user-img">
                    <img alt="image" src="../../imgs/person-center/girl.jpg">
                </a>
                <div class="media-body context">
                    <textarea class="form-control " placeholder="填写评论..." rows="3"></textarea>
                </div>

                <div class="fabiao">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                        发表评论
                    </button>
                    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content animated bounceInRight">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span
                                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                                    </button>
                                    <h4 class="modal-title">亲,确认发布该评论么</h4>
                                </div>
                                <div class="modal-body">
                                    <p>
                                        H+是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-md-11">
                    <!-- 用户单条评论及多条回复 -->
                    <div class="social-feed-separated">
                        <div class="social-avatar">
                            <a href="">
                                <img alt="image" src="../../imgs/person-center/girl.jpg">
                            </a>
                        </div>

                        <div class="social-feed-box">
                            <div class="social-avatar">
                                <a href="#">
                                    尤小右
                                </a>
                                <small class="text-muted">8月18日</small>
                            </div>
                            <div class="social-body">
                                <p>
                                    新技术新概念很多，而且有了新定律：前端开发每18月会难一倍
                                </p>
                                <img src="../../imgs/person-center/girl02.jpg" class="img-responsive comment-img">
                                <div class="btn-group">
                                    <button class="btn btn-white btn-xs"><i class="fa fa-thumbs-up"></i> 赞</button>
                                    <button class="btn btn-white btn-xs"><i class="fa fa-comments"></i> 评论</button>
                                </div>
                            </div>
                            <div class="social-footer">
                                <div class="social-comment">
                                    <a href="" class="pull-left">
                                        <img alt="image" src="../../imgs/person-center/girl.jpg">
                                    </a>
                                    <div class="media-body">
                                        <a href="#">
                                            尤小右
                                        </a> 图表展示、数据可视化是前端领域一个麻烦且重要的事情，这里推荐了11个JS图表库，各取所需吧
                                        <br />
                                        <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26</a> -
                                        <small class="text-muted">8月18日</small>
                                    </div>
                                </div>

                                <div class="social-comment">
                                    <a href="" class="pull-left">
                                        <img alt="image" src="../../imgs/person-center/girl.jpg">
                                    </a>
                                    <div class="media-body">
                                        <a href="#">
                                            尤小右
                                        </a> 看上去不错，如能结合乐曲播放有个动效就更酷了 :z
                                        <br />
                                        <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 11</a> -
                                        <small class="text-muted">8月18日</small>
                                    </div>

                                    <div class="social-comment">
                                        <a href="" class="pull-left">
                                            <img alt="image" src="../../imgs/person-center/girl.jpg">
                                        </a>
                                        <div class="media-body">
                                            <a href="#">
                                                尤小右
                                            </a> 用checkbox + CSS 也能玩出来很多花样，来看看这些有趣的例子吧！
                                            <br />
                                            <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 11</a> -
                                            <small class="text-muted">8月18日</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="social-comment">
                                    <a href="" class="pull-left">
                                        <img alt="image" src="../../imgs/person-center/girl.jpg">
                                    </a>
                                    <div class="media-body">
                                        <a href="#">
                                            尤小右
                                        </a> 有情怀的工程师，赞。
                                        <br />
                                        <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26</a> -
                                        <small class="text-muted">8月18日</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="social-feed-separated">
                        <div class="social-avatar">
                            <a href="">
                                <img alt="image" src="../../imgs/person-center/girl.jpg">
                            </a>
                        </div>

                        <div class="social-feed-box">
                            <div class="social-avatar">
                                <a href="#">
                                    尤小右
                                </a>
                                <small class="text-muted">8月18日</small>
                            </div>
                            <div class="social-body">
                                <p>
                                    新技术新概念很多，而且有了新定律：前端开发每18月会难一倍
                                </p>
                                <img src="../../imgs/person-center/girl02.jpg" class="img-responsive comment-img">
                                <div class="btn-group">
                                    <button class="btn btn-white btn-xs"><i class="fa fa-thumbs-up"></i> 赞</button>
                                    <button class="btn btn-white btn-xs"><i class="fa fa-comments"></i> 评论</button>
                                </div>
                            </div>
                            <div class="social-footer">
                                <div class="social-comment">
                                    <a href="" class="pull-left">
                                        <img alt="image" src="../../imgs/person-center/girl.jpg">
                                    </a>
                                    <div class="media-body">
                                        <a href="#">
                                            尤小右
                                        </a> 图表展示、数据可视化是前端领域一个麻烦且重要的事情，这里推荐了11个JS图表库，各取所需吧
                                        <br />
                                        <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26</a> -
                                        <small class="text-muted">8月18日</small>
                                    </div>
                                </div>

                                <div class="social-comment">
                                    <a href="" class="pull-left">
                                        <img alt="image" src="../../imgs/person-center/girl.jpg">
                                    </a>
                                    <div class="media-body">
                                        <a href="#">
                                            尤小右
                                        </a> 看上去不错，如能结合乐曲播放有个动效就更酷了 :z
                                        <br />
                                        <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 11</a> -
                                        <small class="text-muted">8月18日</small>
                                    </div>

                                    <div class="social-comment">
                                        <a href="" class="pull-left">
                                            <img alt="image" src="../../imgs/person-center/girl.jpg">
                                        </a>
                                        <div class="media-body">
                                            <a href="#">
                                                尤小右
                                            </a> 用checkbox + CSS 也能玩出来很多花样，来看看这些有趣的例子吧！
                                            <br />
                                            <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 11</a> -
                                            <small class="text-muted">8月18日</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="social-comment">
                                    <a href="" class="pull-left">
                                        <img alt="image" src="../../imgs/person-center/girl.jpg">
                                    </a>
                                    <div class="media-body">
                                        <a href="#">
                                            尤小右
                                        </a> 有情怀的工程师，赞。
                                        <br />
                                        <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26</a> -
                                        <small class="text-muted">8月18日</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部分页 -->
        <div class="page">
            <div id="comment-page"></div>
        </div>

    </div>

    </div>
    <!-- 评论结束 -->





    <script src="../../plugins/layui/layui.js"></script>
    <script src="../../js/nav/nav.js"></script>
    <script src="../../js/plan-detail/calender.js"></script>
    <script src="../../js/user/jquery.min.js"></script>
    <script src="../../js/user/bootstrap.min.js"></script>
    <script src="../../js/user/content.js"></script>

</body>

</html>